<template>
	<view class="content">
    <mvBar :mysNavConfig="mysNavConfig"></mvBar>
    <view class="bg-img"><image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/recharge-bg.png"></image></view>
    <view class="total-point">
      <p class="title"> </p>
      <p class="num">
<!--        <text>35</text>分-->
      </p>
    </view>
		<le-dropdown v-model:menuList="menuList" themeColor="#006241" :duration="300" :isCeiling="true"
			@onConfirm="onConfirm"></le-dropdown>
		<view class="change-list">
			<view class="item" v-for="(item,index) in histList" :key="index">
				<view class="item-top">
<!--					<view class="name">-->
<!--						<view class="left">-->
<!--							{{item.companyId>0?item.companyName +'-'+ item.memberName:item.memberName}}-->
<!--						</view>-->
<!--						<view class="right">-->
<!--							{{item.memberCard}}-->
<!--						</view>-->
<!--					</view>-->
					<view class="head">
<!--						<view class="left">{{item.amtTypeName}}</view>-->
						<view class="left">{{item.companyId>0?item.companyName +'-'+ item.memberName:item.memberName}}</view>
						<view class="right" :class="{'less': item.amt < 0}">{{item.amt}}</view>
					</view>
					<view class="bottom">
						<view class="left">{{item.createTime}}</view>
						<view class="right">余额：{{item.accAmt}}</view>
					</view>
				</view>
				<view class="refund" @click="refund()" v-if="false">
					退款
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listHistAmt,
		wxRefund
	} from '@/api/index.js'
	import {
		getPreviousDate
	} from '@/utils/common.js'
	import {
		toast,
	} from '@/utils/common'
  import mvBar from "@/components/mysNavBar.vue";
	export default {
    components: {mvBar},
    data() {
      return {
        mysNavConfig: {
          navPadding: true,
          isHome: false,
          navFixed: true,
          navTitle: {
            text: "我的钱包",
            color: "#FFFFFF",
            fontSize: "34upx", // px upx rpx
            fontWeight: "500", // blod
          },
          leftIconPath: '/static/header/back.png',
        },
				histList: [],
				pageSize: 10,
				pageIndex: 1,
				total: 0,
				param: {
					amtType: '',
					createTime: '',
					memberId: ''
				},
				menuList: [{
						title: '收支类型',
						type: 'cell',
						value: '',
						options: [{
								label: "请选择类型",
								value: ''
							}, {
								label: "由近到远",
								value: 0
							},
							{
								label: "由远到近",
								value: 1
							},
							{
								label: "由远到近",
								value: 2
							},
							{
								label: "由远到近",
								value: 3
							},
						]
					},
					{
						title: '时间',
						type: 'cell',
						value: '',
						options: [{
								label: "请选择时间",
								value: ''
							},
							{
								label: "当天",
								value: getPreviousDate(0)
							},
							{
								label: "本周	",
								value: getPreviousDate(7)
							},
							{
								label: "本月",
								value: getPreviousDate(30)
							},
							{
								label: "三月内",
								value: getPreviousDate(90)
							},
						]
					},
					{
						title: '卡',
						type: 'cell',
						value: '',
						options: [{
							label: '请选择卡',
							value: ''
						}]
					}
				]
			};
		},
		onLoad(option) {
			let memberAccListVos = JSON.parse(option.memberAccListVos)
			memberAccListVos.forEach(item => {
				this.menuList[2].options.push({
					label: item.gradeName,
					value: item.memberId,
				})
			})
			this.getListHistAmt()
		},
		methods: {
			getListHistAmt() {
				uni.showLoading({
					title: '加载中'
				})
				listHistAmt({
					openId: uni.getStorageSync('userOpenId'),
					pageSize: this.pageSize,
					pageIndex: this.pageIndex,
					amtType: this.param.amtType,
					createTime: this.param.createTime,
					memberId: this.param.memberId
				}).then(res => {
					uni.hideLoading()
					this.histList = res.rows
					this.total = res.rows.total
					return
				}).catch(error => {
					uni.hideLoading()
					toast(error)
				})
				this.histList = []
				this.total = 0

			},
      isLess(amt){
        console.log(amt)
        // if (amt.includes('-'))
        //   return true
      },
			onConfirm(e) {
				if (e.options[0].label == '请选择类型') {
					this.param.amtType = e.value
				} else if (e.options[0].label == '请选择时间') {
					this.param.createTime = e.value
				} else if (e.options[0].label == '请选择卡') {
					this.param.memberId = e.value
				}
				this.getListHistAmt()
			},
			refund() {
				uni.showLoading({
					title: '请求中',
				})
				wxRefund().then(res => {
					toast('申请成功')
					uni.hideLoading()
				}).catch(error => {
					uni.hideLoading()
					toast(error)
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
    position: relative;
    width: 100%;
    height: 100vh;
    .bg-img{
      width: 100%;
      height: 420upx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .total-point{
      padding: 32upx 48upx;
      color: #FFFFFF;
      font-size: 28upx;
      line-height: 44upx;
      .title{
        height: 46upx;
        font-weight: 500;
      }
      .num{
        margin-top: 24upx;
        height: 44upx;
        text{
          font-size: 48upx;
          margin-right: 16upx;
          font-weight: 700;
        }
      }
    }

		.head {
			position: relative;

			image {
				width: 100%;
				height: 340rpx;
			}

			.price {
				top: 140rpx;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.number {
					font-size: 56rpx;
					font-weight: 500;
					color: #ffffff;
					line-height: 56rpx;
				}

				.describe {
					font-size: 30rpx;
					color: #c1c1c1;
					line-height: 30rpx;
					margin-top: 16rpx;
				}
			}
		}

		.change-list {
      background: #FFFFFF;
      padding: 0 32upx;
      .item{
        padding: 24upx 0;
      }
			.item,
			.active {
				//margin-bottom: 20rpx;
				border-bottom: 2rpx solid #ededed;
				.item-top {
          box-sizing: border-box;

					.name {
						display: flex;
						justify-content: space-between;
					}

					.head {
						display: flex;
						justify-content: space-between;
						align-items: center;
						// margin-bottom: 26rpx;
						margin-bottom: 20rpx;

						.left {
							font-size: 30rpx;
							color: #333333;
							line-height: 30rpx;
              font-weight: 500;
						}

						.right {
							font-size: 36rpx;
							font-weight: 500;
							color: #de0c19;
							line-height: 36rpx;
              &.less{
                color: #006241;
              }
						}
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;

						view {
							font-size: 26rpx;
							color: #999999;
							line-height: 26rpx;
						}
					}
				}

				.refund {
					text-align: center;
					line-height: 80rpx;
					background: #006241;
					color: #ffffff;
					margin-top: 20rpx;
				}
			}

			//.item {
			//	padding: 24rpx 24rpx;
			//}

			.active {
				padding: 24rpx 0rpx 0px 0rpx;
			}
		}
	}
</style>